<template>
	<view class="layout">
		<view>
			<view class="layout-close">
				<image class="layout-close-image" :src="BackIcon" @click="goBack" mode=""></image>
			</view>
			<view class="layout-header">
				<view class="layout-header-title">输入验证码</view>
				<view class="layout-header-tips">短信验证码已发送至：{{ phone.substr(0, 3) + '****' + phone.substr(7) }}</view>
			</view>
			<view class="layout-body">
				<view class="layout-code">
					<input
						v-model="code"
						class="layout-code-input"
						focus
						@blur="onBlur"
						@focus="inFocus"
						@input="setCode"
						:maxlength="codeLength"
						type="number"
					/>
					<view>
						<view class="layout-code-number">
							<view class="layout-code-number-item" v-for="(item, index) in codeLength" :key="item">
								<view class="layout-code-number-item-line" v-if="currentIndex == index && isFocus"></view>
								<text v-else>{{ codeArr[index] }}</text>
							</view>
						</view>
						<view class="layout-code-line">
							<view class="layout-code-line-item" v-for="(item, index) in codeLength" :key="index">
								<view class="layout-code-line-item-current" v-if="currentIndex == index && isFocus"></view>
							</view>
						</view>
					</view>
					<view class="layout-code-tips">
						<text v-if="timer">重新获取：{{ timer }}s</text>
						<text v-else class="layout-code-tips-code" @click="getCode(sendCodeTime)">重新获取验证码</text>
					</view>
					<view class="layout-code-invite">
						<input placeholder="请输入邀请码（非必填" v-model="invalidateCode" />
					</view>
				</view>

				<view class="layout-login">
					<button :disabled="timer == 0" @click="login" :class="{ active: timer == 0 }">立即登陆</button>
				</view>
			</view>
		</view>

		<view class="layout-footer">
			<text>
				登录即同意
				<text class="layout-footer-bold" @click="toAgreement">《联联探客隐私协议》</text>
			</text>
		</view>
	</view>
</template>

<script>
import { defaultImageUrl } from '@/utils';

import { mobileLogin, sendCode } from '@/api/login';
import srorageKey from '@/utils/srorage/key';
import { getLocal, setLocal } from '@/utils';
import { mapMutations } from 'vuex';
const webView = `${defaultImageUrl}webView/PlatformPrivacyAgreement.html`;
const BackIcon = Object.freeze(`${defaultImageUrl}help/icon_navbar_back.png`);
const codeLength = 4;
const codeArr = Array.from({ length: codeLength }).map((item) => '');
const sendCodeTime = 60;
export default {
	data() {
		return {
			phone: null,
			BackIcon,
			codeLength,
			codeArr,
			sendCodeTime,
			currentIndex: 0,
			timer: 0,
			Interval: null,
			code: null,
			isFocus: true,
			invalidateCode: null
		};
	},
	onLoad(options) {
		this.phone = options.phone;
		this.getCode(this.sendCodeTime);
	},
	onBackPress() {
		uni.$emit('VerifyCode', { timer: this.timer });
	},
	onUnload() {
		clearInterval(this.Interval);
	},
	methods: {
		...mapMutations(['changeUserInfo']),
		login() {
			// 登陆
			const { phone, invalidateCode, code, timer } = this;
			console.log(invalidateCode);
			if (!timer) return;
			const clientid = getLocal(srorageKey.pushClientid);
			let params = {
				clientid,
				code,
				invalidateCode,
				phoneNumber: phone
			};
			mobileLogin(params).then((res) => {
				const { code, message } = res;
				console.log(res);
				if (code !== 200) {
					uni.showToast({
						title: message
					});
					return;
				}
				clearInterval(this.Interval);
				this.changeUserInfo(res.data);
				this.timer = 0;
				uni.navigateBack({
					delta: 2
				});
			});
		},
		goBack() {
			uni.navigateBack({
				delta: 1
			});
		},
		getCode(timer) {
			//  发送验证码 并倒计时
			this.timer = timer;
			let params = {
				mobile: this.phone
			};
			sendCode(params).then((res) => {
				const { message, code } = res;
				if (code !== 200) {
					uni.showToast({
						title: message
					});
					return;
				}
			});
			this.Interval = setInterval(() => {
				this.timer -= 1;
				if (!this.timer) {
					clearInterval(this.Interval);
				}
			}, 1000);
		},
		toAgreement() {
			const url = `/tandianPage/CommonWebView?webView=${webView}`;
			uni.navigateTo({
				url
			});
		},
		inFocus() {
			this.isFocus = true;
		},
		onBlur() {
			this.isFocus = false;
		},
		setCode(e) {
			const { value } = e.detail;
			let arr = value.split('');
			this.codeArr = arr;
			this.currentIndex = arr.length;
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.layout {
	height: 100vh;
	@include Db_iosBottomDistance(40rpx);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: #ffffff;
	&-close {
		padding-top: calc(var(--status-bar-height) + 20rpx);
		padding-left: 32rpx;
		&-image {
			width: 48rpx;
			height: 48rpx;
		}
	}
	&-header {
		padding-top: 44rpx;
		text-align: center;
		&-title {
			font-size: 40rpx;
			font-weight: 600;
			color: #333333;
		}
		&-tips {
			padding-top: 24rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}
	&-body {
		padding: 0 48rpx;
	}
	&-code {
		margin-top: 80rpx;
		position: relative;
		&-number {
			display: flex;
			justify-content: space-between;
			align-items: center;
			&-item {
				width: 80rpx;
				height: 66rpx;
				text-align: center;
				font-size: 48rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				&-line {
					display: inline-block;
					height: 50rpx;
					width: 1rpx;
					animation: blink 1s infinite steps(1, start);
					@keyframes blink {
						0%,
						100% {
							background-color: #ff8840;
						}
						50% {
							background-color: transparent;
						}
					}
				}
			}
		}
		&-input {
			height: 66rpx;
			width: 200%;
			position: absolute;
			left: -100%;
			top: 0;
			// z-index: -1;
			// background-color: red;
			opacity: 1;
		}
		&-line {
			display: flex;
			justify-content: space-between;
			align-items: center;
			&-item {
				position: relative;
				width: 80rpx;
				height: 2rpx;
				background: #eeeeee;
				&-current {
					position: absolute;
					top: 0;
					left: 0;
					height: 2rpx;
					width: 80rpx;
					background: #ff8840;
				}
			}
		}
		&-tips {
			margin-top: 28rpx;
			display: flex;
			justify-content: flex-end;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			&-code {
				color: #ff6b11;
			}
		}
		&-invite {
			margin-top: 40rpx;
			input {
				padding-left: 24rpx;
				height: 100rpx;
				background: #f6f6f6;
				border-radius: 24rpx;
				font-size: 26rpx;
			}
		}
	}
	&-login {
		margin-top: 80rpx;

		button {
			@include Db_commonButton(80rpx, 24rpx);
		}
		// text-align: center;
		// background: linear-gradient(132deg, #ff8b44 0%, #ff6614 100%);
		// border-radius: 24rpx;
		// font-size: 28rpx;
		// font-weight: 500;
		// color: #ffffff;
	}
	&-footer {
		padding-bottom: 40rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		text-align: center;
		&-bold {
			color: #333333;
			text-decoration: underline;
		}
	}
}
</style>
